<template>
    <div>
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="form">
            <el-form-item prop="name">
                <el-select
                    v-model="dataForm.name"
                    class="input"
                    placeholder="选择会议室"
                    size="medium"
                    clearable="clearable"
                >
                    <el-option v-for="one in roomList" :label="one.name" :value="one.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="date">
                <el-date-picker
                    v-model="dataForm.date"
                    type="date"
                    placeholder="选择日期"
                    class="input"
                    size="medium"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
                <el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>
            </el-form-item>
            <el-form-item class="mold">
                <el-radio-group v-model="dataForm.mold" size="medium" @change="changeHandle">
                    <el-radio-button label="全部会议"></el-radio-button>
                    <el-radio-button label="我的会议"></el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="gantt" ref="gantt" v-show="mode == 'gantt'">
            <div class="row">
                <div class="cell-time"></div>
                <div class="cell-time" v-for="one in time">
                    <span class="time">{{ one }}</span>
                </div>
            </div>
            <div class="row" v-for="room in gantt.meetingRoom">
                <div class="cell room">{{ room.name }}</div>
                <div class="cell" v-for="one in time">
                    <div
                        v-if="room.meeting.hasOwnProperty(one)"
                        class="meeting"
                        :class="room.meeting[one].split('#')[1]"
                        :style="'width:' + room.meeting[one].split('#')[0] * gantt.cellWidth + 'px'"
                    ></div>
                </div>
            </div>
        </div>
        <el-pagination
            v-show="mode == 'gantt'"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            :total="totalCount"
            layout="total, sizes, prev, pager, next, jumper"
        />

        <div class="calendar" v-show="mode == 'calendar'">
            <div class="row">
                <div class="cell">时间</div>
                <div class="cell" v-for="one in calendar.days">{{ one.date }}（{{ one.day }}）</div>
            </div>
            <div class="row" v-for="(one, index) in time">
                <div class="cell-time" v-if="time[index + 1] != null">{{ one }} ~ {{ time[index + 1] }}</div>
                <div class="cell" v-for="day in calendar.days" v-if="time[index + 1] != null">
                    <div
                        class="meeting"
                        v-if="calendar.map.hasOwnProperty(`${day.date}#${one}`)"
                        :style="
                            'height:' +
                                calendar.map[day.date + '#' + one].time * 31 +
                                'px; line-height:' +
                                calendar.map[day.date + '#' + one].time * 31 +
                                'px'
                        "
                        :ref="`${day.date}#${one}`"
                        @click="
                            infoHandle(calendar.map[day.date + '#' + one].id, calendar.map[day.date + '#' + one].status)
                        "
                    >
                        <SvgIcon
                            name="close"
                            class="icon-svg-close"
                            v-if="
                                calendar.map[`${day.date}#${one}`].isCreator == 'true' &&
                                    [1, 3].includes(calendar.map[`${day.date}#${one}`].status)
                            "
                            @click.stop="deleteHandle(`${day.date}#${one}`)"
                        />
                        {{ calendar.map[`${day.date}#${one}`].title }}
                    </div>
                </div>
            </div>
        </div>
        <add v-if="addVisible" ref="add" @refresh="refresh"></add>
        <info v-if="infoVisble" ref="info"></info>
    </div>
</template>

<script>
import SvgIcon from '../components/SvgIcon.vue';
import dayjs from 'dayjs';
import Add from './offline_meeting-add.vue';
import Info from './offline_meeting-info.vue';
export default {
    components: { SvgIcon, Add, Info },
    data: function() {
        return {
            time: [
                '08:30',
                '09:00',
                '09:30',
                '10:00',
                '10:30',
                '11:00',
                '11:30',
                '12:00',
                '12:30',
                '13:00',
                '13:30',
                '14:00',
                '14:30',
                '15:00',
                '15:30',
                '16:00',
                '16:30',
                '17:00',
                '17:30',
                '18:00',
                '18:30'
            ],
            gantt: {
                meetingRoom: [],
                cellWidth: 0
            },
            calendar: {
                map: {},
                days: []
            },
            roomList: [],
            dataForm: {
                name: null,
                date: null,
                mold: '全部会议'
            },
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            dataListLoading: false,
            addVisible: false,
            infoVisble: false,
            dataRule: {},
            mode: 'gantt'
        };
    },
    methods: {
		loadDataList:function(){
			let that=this
			that.dataListLoading=true
			let data = {
			    name: that.dataForm.name,
			    mold: that.dataForm.mold,
			    page: that.pageIndex,
			    length: that.pageSize
			};
			if(that.dataForm.date==null||that.dataForm.date==""){
				data.date=dayjs(new Date()).format("YYYY-MM-DD")
			}
			else{
				data.date=dayjs(that.dataForm.date).format("YYYY-MM-DD")
			}
			that.$http("meeting/searchOfflineMeetingByPage","POST",data,true,function(resp){
				
                let page=resp.page
				let temp=[]
				for(let room of page.list){
					let json={}
					json.name=room.name
					json.meeting={}
					if(room.hasOwnProperty("meeting")){
						for(let meeting of room.meeting){
							let color=null
							if(meeting.status==1){
								color="yellow"
							}
							else if (meeting.status == 3) {
								color = 'blue';
							}
							else if (meeting.status == 4) {
								color = 'pink';
							} 
							else if (meeting.status == 5) {
								color = 'gray';
							}
							json.meeting[meeting.start]=meeting.time+"#"+color
						}
					}
					temp.push(json)
				}
				that.gantt.meetingRoom=temp
				that.totalCount=page.totalCount
				that.dataListLoading=false
			})
		},
        backHandle: function() {
            let that = this;
            that.mode = 'gantt';
        },
		searchHandle:function(){
			let that=this
			if(that.dataForm.name==null||that.dataForm.name==""){
				that.$refs["dataForm"].validate(valid=>{
					if(valid){
						that.$refs["dataForm"].clearValidate()
						if(that.pageIndex!=1){
							that.pageIndex=1
						}
						that.loadDataList()
						that.mode="gantt"
					}
					else{
						return false
					}
				})
			}
			else{
				that.$refs["dataForm"].validate(valid=>{
					if(valid){
						that.$refs["dataForm"].clearValidate()
						let data={
							name:that.dataForm.name,
							mold:that.dataForm.mold
						}
						if(that.dataForm.date!=null&&that.dataForm.date!=""){
							data.date=dayjs(that.dataForm.date).format("YYYY-MM-DD")
						}
						that.$http("meeting/searchOfflineMeetingInWeek","POST",data,true,function(resp){
							let map={}
							for(let one of resp.list){
								map[`${one.date}#${one.start}`]=one
							}
							that.calendar.map=map
							that.calendar.days=resp.days
							that.mode="calendar"
						})
						
					}
					else{
						return false
					}
				})
			}
		},
		changeHandle:function(){
			this.searchHandle()
		},
		sizeChangeHandle:function(val){
			this.pageSize=val
			this.pageIndex=1
			this.loadDataList()
		},
		currentChangeHandle:function(val){
			this.pageIndex=val
			this.loadDataList()
		},
		addHandle:function(){
			this.addVisible=true
			this.$nextTick(()=>{
				this.$refs.add.init()
			})
		},
		infoHandle:function(id,status){
			this.infoVisble=true
			this.$nextTick(()=>{
				this.$refs.info.init(id,status)
			})
		},
		deleteHandle:function(key){
			let that=this
			that.$confirm('是否删除该会议?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				let json=that.calendar.map[key]
				let data={
					id:json.id,
					uuid:json.uuid,
					instanceId:json.instanceId,
					reason:"删除会议"
				}
				that.$http("meeting/deleteMeetingApplication","POST",data,true,function(resp){
					if(resp.rows==1){
						that.$message({
							message: '删除成功',
						    type: 'success',
						    duration: 1200
						});
						that.searchHandle()
					}
					else{
						that.$message({
							message: '删除失败',
							type: 'error',
							duration: 1200
						});
					}
				})
			})
		},
		refresh:function(){
			this.mode="gantt"
			this.$refs["dataForm"].resetFields()
			this.loadDataList()
		}
        
    },
    mounted: function() {
        let that = this;
        //根据实际情况设置甘特图每个单元格应该有的宽度
        let rowWidth = that.$refs['gantt'].offsetWidth - 1;
        let cellWidth = rowWidth * 0.042 + 0.01;
        that.gantt.cellWidth = cellWidth;

        //当浏览器窗口尺寸改变的时候，重新设置甘特图单元格的宽度
        window.addEventListener('resize', () => {
            let rowWidth = that.$refs['gantt'].offsetWidth - 1;
            let cellWidth = rowWidth * 0.042 + 0.01;
            that.gantt.cellWidth = cellWidth;
        });
    },
    created: function() {
        //加载会议室列表
        let that = this;

        that.$http('meeting_room/searchAllMeetingRoom', 'GET', null, true, function(resp) {
            that.roomList = resp.list;
        });

        //加载日程表分页数据
        that.loadDataList();
    }
};
</script>

<style lang="less" scoped="scoped">
@import url('offline_meeting.less');
</style>
